<template>
<div style="height: 100%" >
  <my-map :center="center" :zoom="7"  ref="map" >  
    <my-map-draw :type="type" ref="draw" :freehand="isFreehand" :style-function="styleFn"></my-map-draw>
    <my-map-placement>
      <el-select v-model="type" size="mini">
        <el-option v-for="item in typeOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-checkbox v-model="isFreehand" label="自由"></el-checkbox>
      <el-button size="mini" type="primary" @click="draw">画图</el-button>
      <el-button size="mini" type="primary" @click="modify">修改</el-button>
      <el-button size="mini" type="primary" @click="finish">完成</el-button>
      <el-button size="mini" type="primary" @click="clear">清除</el-button>

    </my-map-placement>
  </my-map> 
</div>
</template>
<style lang="scss" scope> 

</style>
<script>
// import {svgToImg} from '$ui/map/utils/util' 
import parseStyle from '$ui/map/utils/style' 
const TYPES_OPTS = [
  {label: '点', value: 'Point'},
  {label: '线', value: 'LineString'},
  {label: '圆', value: 'Circle'},
  {label: '多边形', value: 'Polygon'} 
]
export default {
  components: {},
  data() {
    return {
      center: [120, 30],
      typeOpts: TYPES_OPTS,
      type: 'Point',
      isFreehand: false
      
    }
  },
  computed: {
     
  },
  methods: {
    styleFn() {
      return parseStyle({
        fill: 'yellow',
        stroke: {width: 2, color: 'green'}
      })
    },
    draw() {
      this.$refs.draw.draw()
    },
    finish() {
      this.$refs.draw.finish()
    },
    modify() {
      this.$refs.draw.modify()
    },
    clear() {
      this.$refs.draw.clear()
    },
    clickHandle(e) {
      // const feature = this.$refs.map.getFeatureAtPixel(e.pixel)
      console.log(e)
      // if (feature) {
      //   this.$refs.draw.modify(feature)
      // }
    }

  },
  created() {},
  mounted() {
  }
}
</script>
